import React from 'react';
import { Input, Form, Button, Row, Col, Icon } from 'antd';
import styles from './index.less';

const OrgSearch = ({ form, onSearch }) => {
    const { getFieldDecorator } = form;

    const handleSearch = () => {
        form.validateFields((err, values) => {
            if (!err) {
                if (onSearch) {
                    onSearch(values);
                }
            }
        });
    };

    const handleReset = () => {
        form.setFieldsValue({ employeeName: '', organizationName: '' });
    };

    const searchValidator = (formId, value = '', callback) => {
        const inputValue = form.getFieldValue(formId) || '';
        if (value.trim().length > 0 || inputValue.trim().length > 0) {
            callback();
        } else {
            callback('层级或主管不能为空');
        }
    };

    return (
        <div className={styles.searchWrapper}>
            <Form className={styles.searchForm} layout="inline">
                <Row gutter={24}>
                    <Col span={5}>
                        <Form.Item label="层级">
                            {getFieldDecorator('organizationName', {
                                rules: [
                                    {
                                        validator: (rule, value, callback) => { searchValidator('employeeName', value, callback) }
                                    }
                                ]
                            })(
                                <Input
                                    suffix={<Icon type="search" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={5}>
                        <Form.Item label="主管">
                            {getFieldDecorator('employeeName', {
                                rules: [
                                    {
                                        validator: (rule, value, callback) => { searchValidator('organizationName', value, callback) }
                                    }
                                ]
                            })(
                                <Input
                                    suffix={<Icon type="search" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={3} className={styles.flexClo}>
                        <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
                            <Button type="link" ghost onClick={handleReset}>
                                清空
                            </Button>
                        </Form.Item>
                        <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
                            <Button type="primary" onClick={handleSearch}>
                                搜索
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </div>
    )
}

export default Form.create()(OrgSearch);
